import { FC } from 'react'
import { Tabs } from 'antd'
import { useCallback, useMemo, useRef } from 'react'
import { Redirect, Route, Switch } from 'react-router-dom'
import * as H from 'history'
import AppData from './AppData'
import AppAgree from './AppAgree'
// import AppDataModification from './AppData/AppDataModification/index';
// 注意：TS类型，从包或者是百度翻找
interface IAppSet {
  history: H.History,
  match: { path: string },
  location: H.Location
}
const AppSet: FC<IAppSet> = (props) => {
  const { match, location, history } = props
  const { path } = match
  const { pathname } = location
  // 注意：截取路径，点击那个页面切换到那个
  const activeKey = useMemo(() => (pathname.split('/')[2] || ''), [pathname])
  // 注意：点击切换的，相当于ul > li
  const tabs = useRef([
    { label: '商户资料管理', key: 'data'},
    { label: '加盟协议', key: 'agree'},
  ])
  // 注意：拼接路径
  const handleTabChange = useCallback((key: string) => history.push(`${path}/${key}`), [])
  return (
    <>
      {/* //注意：items={ tabs.current } 是 点击切换的每一个 li */}
      <Tabs activeKey={ activeKey } onChange={ handleTabChange } items={ tabs.current } />
      <Switch>
        <Route  path={`${path}/data`} component={AppData} />
        <Route  path={`${path}/agree`} component={AppAgree} />
        <Redirect to={`${path}/data`} />
      </Switch>
    </>
  )
}

export default AppSet
